<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>新增地址</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css"/>
</head>
<body>
<div id="app">
    <!-- 带返回按钮的头部 -->
    <div class="header">
        <img class="back-btn" src="images/arrow.png" onclick="back()"/>
        <span id="main_title">新建收货地址</span>
        <span class="blank"></span>
    </div>

    <!-- 地址、标签编辑区 -->
    <ul class="address">
        <li>
            <i></i>
            <span class="left">省市</span>
            <div class="right">
                <select
                        class="province"
                        name="province"
                        id="param_province"
                        onchange="provincechange()"
                >
                    <option>请选择省份</option>
                </select>
                <select class="city" name="city" id="param_city">
                    <option>请选择城市</option>
                </select>
            </div>
        </li>
        <li>
            <i>*</i>
            <span class="left">地址</span>
            <input
                    type="text"
                    placeholder="填写详细地址，例：XX 小区 1 幢 101"
                    id="param_address"
            />
        </li>
        <li class="mark">
            <i></i>
            <span class="left">标签</span>
            <a class="active">家</a>
            <a>公司</a>
            <a>学校</a>
            <input type="hidden" id="param_mark" value="0"/>
        </li>
    </ul>

    <!-- 联系人信息编辑及表单提交区 -->
    <ul class="user-info">
        <li>
            <i>*</i>
            <span class="left">联系人</span>
            <input type="text" placeholder="收货人姓名" id="param_name"/>
        </li>
        <li>
            <i>*</i>
            <span class="left">手机号</span>
            <input type="text" placeholder="收货人手机号码" id="param_phone"/>
        </li>
        <li>
            <a class="save-btn" onclick="saveInfo()">保存</a>
        </li>
    </ul>

    <!-- 收获地址列表展示区 -->
    <ul class="address-list">
        <li>
            <div class="show-area">
                <label class="school">学校</label>
                <span>浙江省杭州市</span>
            </div>
            <div class="show-address">
                <span>仓前街道梦想小镇天使村</span>
                <a><img src="./images/edit.png"/></a>
            </div>
            <div class="show-info">
                <span>张三</span>
                <span>18912345678</span>
            </div>
        </li>
    </ul>

    <!-- 提示弹窗 -->
    <div class="warning-dialog" onclick="this.style.display='none';">
        <div class="warning-msg">省市、地址以及联系人和手机号不能为空！</div>
    </div>
</div>

<script type="text/javascript" src="./js/data.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
